<template>
  <view class="serchCom">
    <view class="flex u-p-20">
      <u-input
        v-model="searchData.isCountyName"
        placeholder="请选择区县"
        type="select"
        clearable
        :select-open="countyShow"
        @click="countyShow = true"
        class="county-input u-p-l-30"
      />
      <u-input
        v-model="searchData.isCustomerName"
        placeholder="请选择煤矿"
        type="select"
        :select-open="mineShow"
        @click="mineShow = true"
        class="mine-input u-p-l-30"
        :style="{ marginLeft: '10px' }"
      />
    </view>
    <u-picker mode="selector" v-model="countyShow" :range="countyList" @confirm="confirm" range-key="label"></u-picker>
    <!-- 煤矿企业 -->
    <u-popup mode="bottom" v-model="mineShow">
      <view class="popup-content">
        <view class="u-flex u-row-between u-p-b-30">
          <u-button :hair-line="false" :custom-style="customStyle" throttle-time="500" @click="cancelCustomer()"
            >取消</u-button
          >
          <u-button :hair-line="false" :custom-style="submitStyle" throttle-time="500" @click="clickCustomer()"
            >确定</u-button
          >
        </view>
        <view class="u-p-b-20">
          <u-search
            placeholder="请选择企业名称"
            v-model="filterCustomerVal"
            shape="square"
            bg-color="#E5EAE8"
            height="80"
            :show-action="true"
            :animation="true"
            :input-style="{ marginLeft: '20rpx' }"
            :search-icon="searchSrc"
            placeholder-color="#999999"
            :action-style="{
              color: '#288CFE',
              fontSize: '14px',
              fontWeight: '400',
            }"
          ></u-search>
        </view>
        <scroll-view scroll-y="true" style="height: 600rpx">
          <view class="w-100p checkbox">
            <u-radio-group active-color="#288CFE" width="100%" v-model="radioValue">
              <u-radio
                @change="checkboxCustomerChange"
                v-for="(item, index) in filterCustomerList"
                :key="index"
                :name="item.label"
              >
                {{ item.label }}
              </u-radio>
            </u-radio-group>
            <template v-if="filterCustomerList.length === 0">
              <view class="c-empty p-absolute-center">
                <u-empty text="抱歉，暂无相关数据~" :src="require('@/static/image/empty.png')"></u-empty>
              </view>
            </template>
          </view>
        </scroll-view>
      </view>
    </u-popup>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  props: {
    isCountyName: {
      type: String,
    },
    isCountyId: {
      type: String,
    },
    isCustomerName: {
      type: String,
    },
    isCustomerId: {
      type: String,
    },
    getSearchData: {
      type: Object,
      default: {},
    },
    mineUrl: {
      type: String,
    },
    countyUrl: {
      type: String,
    },
    isTabsChange: {
      // 判断是否有切换情况
      type: Number,
    },
    swiperChange: {
      // 用于统计板块tab切换判断
      type: Number,
    },
  },
  data() {
    return {
      searchData: {},
      searchMsg: {}, // 改变后的筛选数据
      isCity: true,
      isMine: false,
      countyShow: false,
      mineShow: false,
      countyList: [],
      mineList: [],
      swiperCurrent: 0,
      current: 0,

      // 按钮样式
      searchSrc: require("@/static/image/search.png"),
      customStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        color: "#333333",
        background: "#F1F5F3",
        borderRadius: "20rpx",
        width: "40%",
        border: "none",
      },
      submitStyle: {
        color: "#fff",
        background: "#288CFE",
        borderRadius: "20rpx",
        width: "40%",
        border: "none",
      },
      radioValue: "",
      filterCustomerVal: "", //企业名称搜索数据
      arr: [],
      arrTwo: [],
    };
  },
  watch: {
    isTabsChange(v) {
      this.$set(this.searchData, "isCountyId", "");
      this.$set(this.searchData, "isCountyName", "");
      this.$set(this.searchData, "isCustomerName", "");
      this.initCustomer();
    },
    swiperChange(val) {
      // tab切换清空
      if (val) {
        this.mineShow = false;
        this.countyShow = false;
      }
    },
  },
  mounted() {
    if (this.getSearchData) {
      this.$set(this.searchData, "isCountyId", this.getSearchData.countyNo || "");
      this.$set(this.searchData, "isCountyName", this.getSearchData.countyStr || "");
      this.$set(this.searchData, "isCustomerId", this.getSearchData.customerCode || "");
      this.$set(this.searchData, "isCustomerName", this.getSearchData.customerName || "");
    }
    if (getApp().globalData.userInfoData.superviseLevel !== "40") {
      // superviseLevel == '40' 为市级账号
      this.isCity = false;
      this.searchData.isCountyId = getApp().globalData.userInfoData.countyNo;
    }
    this.getMineList();
    this.getCountyList();
  },
  computed: {
    filterCustomerList() {
      return this.mineList.filter((item) => {
        return this.filterCustomerVal
          ? item.label?.indexOf(this.filterCustomerVal) >= 0 ||
              item.pinyinCode?.indexOf(this.filterCustomerVal.toUpperCase()) >= 0
          : true;
      });
    },
  },
  methods: {
    // 获取煤矿列表
    async getMineList() {
      let url = this.mineUrl;
      const { body } = await this.$get(`${url}?countyNo=${this.searchData.isCountyId}`);
      if (body) {
        body.unshift({
          id: "",
          label: "所有煤矿",
        });
        this.mineList = body;
      }
    },
    // 获取区县
    async getCountyList() {
      const { body } = await this.$get(this.countyUrl);
      if (body) {
        body.unshift({
          id: "",
          label: "所有区县",
        });
        this.countyList = body;
      }
    },

    // 煤矿企业数据初始化
    initCustomer() {
      if (this.searchData.isCustomerName !== "") {
        this.arr = [];
        this.arrTwo = [];
        for (let i = 0; i < this.mineList.length; i++) {
          if (this.searchData.isCustomerName.indexOf(this.mineList[i].label) !== -1) {
            this.arr.push(this.mineList[i].label);
            this.arrTwo.push(this.mineList[i].id);
            this.$set(this.mineList[i], "checked", true);
          } else {
            this.$set(this.mineList[i], "checked", false);
          }
        }
        this.$set(this, "customerCode", this.arrTwo.toString());
        this.$set(this, "customerName", this.arr.toString());
        this.radioValue = this.searchData.isCustomerName;
      } else {
        this.arr = [];
        this.arrTwo = [];
        for (let i = 0; i < this.mineList.length; i++) {
          this.$set(this.mineList[i], "disabled", false);
          this.$set(this.mineList[i], "checked", false);
        }
        this.$set(this, "customerCode", "");
        this.$set(this, "customerName", "");
        this.radioValue = "";
      }
    },
    // 选中某个煤矿时，由radio触发
    checkboxCustomerChange(e) {
      if (e) {
        this.radioValue = e;
        this.arr = [e];
        for (let i = 0; i < this.mineList.length; i++) {
          if (this.mineList[i].label === e) {
            this.arrTwo = [this.mineList[i].id];
          }
        }
      }
      this.customerCode = this.arrTwo.toString();
      this.customerName = this.arr.toString();
      if (this.arr.toString() === "所有煤矿") this.customerName = "";
    },
    // 煤矿企业数据取消
    cancelCustomer() {
      this.mineShow = false;
      this.filterCustomerVal = "";
      if (this.radioValue) this.initCustomer();
    },
    // 煤矿企业数据确定
    clickCustomer() {
      this.searchData.isCustomerId = this.customerCode;
      this.searchData.isCustomerName = this.customerName;

      this.$set(this.searchMsg, this.isCustomerId, this.searchData.isCustomerId);
      this.$set(this.searchMsg, this.isCustomerName, this.searchData.isCustomerName);
      this.$set(this.searchMsg, this.isCountyId, this.searchData.isCountyId);
      this.$set(this.searchMsg, this.isCountyName, this.searchData.isCountyName);

      this.filterCustomerVal = "";
      this.mineShow = false;
      this.$emit("searchList", this.searchMsg);
    },
    confirm(index) {
      this.searchData.isCountyName = this.countyList[index].label;
      this.searchData.isCountyId = this.countyList[index].id;
      this.searchData.isCustomerId = "";
      this.searchData.isCustomerName = "";
      if (this.countyList[index].id) {
        this.$set(this.searchMsg, this.isCustomerId, this.searchData.isCustomerId);
        this.$set(this.searchMsg, this.isCustomerName, this.searchData.isCustomerName);
      } else {
        this.$set(this.searchMsg, this.isCustomerId, "");
        this.$set(this.searchMsg, this.isCustomerName, "");
      }
      this.$set(this.searchMsg, this.isCountyId, this.searchData.isCountyId);
      this.$set(this.searchMsg, this.isCountyName, this.searchData.isCountyName);

      this.getMineList();
      this.$emit("searchList", this.searchMsg);
    },
  },
};
</script>

<style lang="scss" scoped>
.mine-input {
  .uni-input-placeholder {
    left: 22rpx;
  }
}

.county-input {
  max-width: 200rpx;
}

.popup-content {
  // 弹出层样式
  padding: 24rpx;
  text-align: center;

  .checkbox {
    &-item {
      height: 100rpx;
    }

    /deep/.u-checkbox-group {
      display: inline;

      .u-checkbox {
        border-bottom: 1px solid #dddddd;
        justify-content: space-between;
        flex-flow: row-reverse;

        .u-checkbox__icon-wrap {
          background: rgba(1, 72, 51, 0.2);
          border: none;
        }
      }
    }

    /deep/.u-radio-group {
      display: inline;

      .u-radio {
        border-bottom: 1px solid #dddddd;
        justify-content: space-between;
        flex-flow: row-reverse;
        height: 90rpx;

        .u-radio__icon-wrap {
          background: rgba(1, 72, 51, 0.2);
          border: none;
        }
      }
    }
  }

  /deep/ .u-radio__label {
    text-align: left;
    flex: 1;
  }
}
</style>
